<template>
  <div class="home">
    <div class="bock1">
      <el-row>
        <el-col :span="12"
          ><div class="carouselDiv">
            <el-carousel class="carouselItem">
              <el-carousel-item>
                <div class="title">888</div>
                <img src="../../assets/1.png" alt="" />
              </el-carousel-item>
              <el-carousel-item>
                <div class="title">888</div>
                <img src="../../assets/2.png" alt="" />
              </el-carousel-item>
              <el-carousel-item>
                <div class="title">888</div>
                <img src="../../assets/3.png" alt="" />
              </el-carousel-item>
            </el-carousel></div
        ></el-col>
        <el-col :span="12">
          <div class="newsDiv">
            <div class="title">
              <div class="yaowen">
                <img src="../../assets/yaowen.png" alt="" />
              </div>
              <div class="title-left">
                <span style="color: #0065ff">今日</span>要闻
              </div>
              <div class="title-right">
                更多
                <img src="../../assets/gengduo.png" alt="" class="gengduoImg" />
              </div>
            </div>
            <div class="content">
              <div>
                <el-row>
                  <el-col :span="4"
                    ><div class="content-left">
                      <div class="content-left-div">
                        2025 <br />
                        <hr />
                        02/25
                      </div>
                    </div></el-col
                  >
                  <el-col :span="20"
                    ><div class="content-right">
                      <div class="top">
                        省公安厅交管局召开全省视频会议推进部署
                      </div>
                      <div class="msg">
                        吉林省工信厅副厅长王大宁、吉林省工信厅无线电管理局局长吕震寰、副局长陈晓涛、调研员耿志勇、调研员王竹等领导莅临吉林吉大通信设计院股份有…
                      </div>
                    </div></el-col
                  >
                </el-row>
              </div>
              <div>
                <el-row>
                  <el-col :span="4"
                    ><div class="content-left">
                      <div class="content-left-div">
                        2025 <br />
                        <hr />
                        02/25
                      </div>
                    </div></el-col
                  >
                  <el-col :span="20"
                    ><div class="content-right">
                      <div class="top">
                        省公安厅交管局召开全省视频会议推进部署
                      </div>
                      <div class="msg">
                        吉林省工信厅副厅长王大宁、吉林省工信厅无线电管理局局长吕震寰、副局长陈晓涛、调研员耿志勇、调研员王竹等领导莅临吉林吉大通信设计院股份有…
                      </div>
                    </div></el-col
                  >
                </el-row>
              </div>
              <div>
                <el-row>
                  <el-col :span="4"
                    ><div class="content-left">
                      <div class="content-left-div">
                        2025 <br />
                        <hr />
                        02/25
                      </div>
                    </div></el-col
                  >
                  <el-col :span="20"
                    ><div class="content-right">
                      <div class="top">
                        省公安厅交管局召开全省视频会议推进部署
                      </div>
                      <div class="msg">
                        吉林省工信厅副厅长王大宁、吉林省工信厅无线电管理局局长吕震寰、副局长陈晓涛、调研员耿志勇、调研员王竹等领导莅临吉林吉大通信设计院股份有…
                      </div>
                    </div></el-col
                  >
                </el-row>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="bock2">
      <el-row :gutter="20">
        <el-col :span="16">
          <el-row :gutter="20">
            <el-col :span="12">
              <div class="span12Div" style="height: 376px">
                <div class="title">
                  <div class="yaowen">
                    <img src="../../assets/yaowen.png" alt="" />
                  </div>
                  <div class="title-left">
                    <span style="color: #0065ff">政策</span>法规
                  </div>
                  <div class="title-right" @click="()=>{$router.push('/zcfg')}">
                    更多
                    <img
                      src="../../assets/gengduo.png"
                      alt=""
                      class="gengduoImg"
                    />
                  </div>
                </div>
                <div class="radio">
                  <el-radio-group v-model="radio1">
                    <el-radio-button label="网络安全政策法规"></el-radio-button>
                    <el-radio-button label="政策法规解读"></el-radio-button>
                  </el-radio-group>
                </div>
                <div class="msg">
                  吉林省公安机关《中华人民共和国反电信网络诈骗法》吉林省公安机关《中华人民共和国反电信网络诈骗法》…
                </div>
                <div class="msg">
                  吉林省公安机关《中华人民共和国反电信网络诈骗法》吉林省公安机关《中华人民共和国反电信网络诈骗法》…
                </div>
                <div class="msg">
                  吉林省公安机关《中华人民共和国反电信网络诈骗法》吉林省公安机关《中华人民共和国反电信网络诈骗法》…
                </div>
                <div class="msg">
                  吉林省公安机关《中华人民共和国反电信网络诈骗法》吉林省公安机关《中华人民共和国反电信网络诈骗法》…
                </div>
                <div class="msg">
                  吉林省公安机关《中华人民共和国反电信网络诈骗法》吉林省公安机关《中华人民共和国反电信网络诈骗法》…
                </div>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="span12Div" style="height: 376px">
                <div class="title">
                  <div class="yaowen">
                    <img src="../../assets/xxtb.png" alt="" />
                  </div>
                  <div class="title-left">
                    <span style="color: #0065ff">信息</span>通报
                  </div>
                  <div class="title-right" @click="()=>{$router.push('/xxtb')}">
                    更多
                    <img
                      src="../../assets/gengduo.png"
                      alt=""
                      class="gengduoImg"
                    />
                  </div>
                </div>
                <div class="radio">
                  <el-radio-group v-model="radio2">
                    <el-radio-button label="安全事件通报"></el-radio-button>
                    <el-radio-button label="预警通报"></el-radio-button>
                  </el-radio-group>
                </div>
                <div class="msg">
                  <span class="span1">
                    吉林省公安机关《中华人民共和国反吉林省公安机关《中华人民共和国反…
                  </span>
                  <span class="span2"> 2022-02-15 </span>
                </div>
                <div class="msg">
                  <span class="span1">
                    吉林省公安机关《中华人民共和国反吉林省公安机关《中华人民共和国反…
                  </span>
                  <span class="span2"> 2022-02-15 </span>
                </div>
                <div class="msg">
                  <span class="span1">
                    吉林省公安机关《中华人民共和国反吉林省公安机关《中华人民共和国反…
                  </span>
                  <span class="span2"> 2022-02-15 </span>
                </div>
                <div class="msg">
                  <span class="span1">
                    吉林省公安机关《中华人民共和国反吉林省公安机关《中华人民共和国反…
                  </span>
                  <span class="span2"> 2022-02-15 </span>
                </div>
                <div class="msg">
                  <span class="span1">
                    吉林省公安机关《中华人民共和国反吉林省公安机关《中华人民共和国反…
                  </span>
                  <span class="span2"> 2022-02-15 </span>
                </div>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="span12Div" style="height: 376px">
                <div class="title">
                  <div class="yaowen">
                    <img src="../../assets/gzdt.png" alt="" />
                  </div>
                  <div class="title-left">
                    <span style="color: #0065ff">工作</span>动态
                  </div>
                  <div class="title-right" @click="()=>{$router.push('/gzdt')}">
                    更多
                    <img
                      src="../../assets/gengduo.png"
                      alt=""
                      class="gengduoImg"
                    />
                  </div>
                </div>
                <div class="radio">
                  <el-radio-group v-model="radio3">
                    <el-radio-button label="网安工作动态"></el-radio-button>
                    <el-radio-button label="国家网络安全动态"></el-radio-button>
                  </el-radio-group>
                </div>
                <div class="msg">
                  吉林省公安机关《中华人民共和国反电信网络诈骗法》吉林省公安机关《中华人民共和国反电信网络诈骗法》…
                </div>
                <div class="msg">
                  吉林省公安机关《中华人民共和国反电信网络诈骗法》吉林省公安机关《中华人民共和国反电信网络诈骗法》…
                </div>
                <div class="msg">
                  吉林省公安机关《中华人民共和国反电信网络诈骗法》吉林省公安机关《中华人民共和国反电信网络诈骗法》…
                </div>
                <div class="msg">
                  吉林省公安机关《中华人民共和国反电信网络诈骗法》吉林省公安机关《中华人民共和国反电信网络诈骗法》…
                </div>
                <div class="msg">
                  吉林省公安机关《中华人民共和国反电信网络诈骗法》吉林省公安机关《中华人民共和国反电信网络诈骗法》…
                </div>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="span12Div" style="height: 376px">
                <div class="title">
                  <div class="yaowen">
                    <img src="../../assets/aqxc.png" alt="" />
                  </div>
                  <div class="title-left">
                    <span style="color: #0065ff">安全</span>宣传
                  </div>
                  <div class="title-right" @click="()=>{$router.push('/aqxc')}">
                    更多
                    <img
                      src="../../assets/gengduo.png"
                      alt=""
                      class="gengduoImg"
                    />
                  </div>
                </div>
                <div class="radio">
                  <el-radio-group v-model="radio4">
                    <el-radio-button label="安全教育宣传"></el-radio-button>
                    <el-radio-button label="安全意识宣传"></el-radio-button>
                  </el-radio-group>
                </div>
                <div class="msg">
                  <span class="span1">
                    吉林省公安机关《中华人民共和国反吉林省公安机关《中华人民共和国反…
                  </span>
                  <span class="span2"> 2022-02-15 </span>
                </div>
                <div class="msg">
                  <span class="span1">
                    吉林省公安机关《中华人民共和国反吉林省公安机关《中华人民共和国反…
                  </span>
                  <span class="span2"> 2022-02-15 </span>
                </div>
                <div class="msg">
                  <span class="span1">
                    吉林省公安机关《中华人民共和国反吉林省公安机关《中华人民共和国反…
                  </span>
                  <span class="span2"> 2022-02-15 </span>
                </div>
                <div class="msg">
                  <span class="span1">
                    吉林省公安机关《中华人民共和国反吉林省公安机关《中华人民共和国反…
                  </span>
                  <span class="span2"> 2022-02-15 </span>
                </div>
                <div class="msg">
                  <span class="span1">
                    吉林省公安机关《中华人民共和国反吉林省公安机关《中华人民共和国反…
                  </span>
                  <span class="span2"> 2022-02-15 </span>
                </div>
              </div>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="8">
          <div class="span12Div" style="height: 794px">
            <div class="title">
              <div class="yaowen bsznImg">
                <img src="../../assets/bszn.png" alt="" />
              </div>
              <div class="title-left bszn" style="color: #fff">办事指南</div>
              <div class="title-right" @click="()=>{$router.push('/bszn')}">
                更多
                <img src="../../assets/gengduo.png" alt="" class="gengduoImg" />
              </div>
            </div>
            <div class="radio bsznRadio">
              <el-radio-group v-model="radio5">
                <el-radio-button label="办事指南"></el-radio-button>
                <el-radio-button label="操作指引"></el-radio-button>
              </el-radio-group>
            </div>
            <div class="bsznMsg">
              <el-row>
                <el-col :span="1">
                  <span class="icon"></span>
                </el-col>
                <el-col :span="23">
                  等级保护备案申请流程以及等保资产申请条件与资格备案申请流程以及等保资产申请条件与资格
                </el-col>
              </el-row>
            </div>
            <div class="bsznMsg">
              <el-row>
                <el-col :span="1">
                  <span class="icon"></span>
                </el-col>
                <el-col :span="23">
                  等级保护备案申请流程以及等保资产申请条件与资格备案申请流程以及等保资产申请条件与资格
                </el-col>
              </el-row>
            </div>
            <div class="bsznMsg">
              <el-row>
                <el-col :span="1">
                  <span class="icon"></span>
                </el-col>
                <el-col :span="23">
                  等级保护备案申请流程以及等保资产申请条件与资格备案申请流程以及等保资产申请条件与资格
                </el-col>
              </el-row>
            </div>
            <div class="bsznMsg">
              <el-row>
                <el-col :span="1">
                  <span class="icon"></span>
                </el-col>
                <el-col :span="23">
                  等级保护备案申请流程以及等保资产申请条件与资格备案申请流程以及等保资产申请条件与资格
                </el-col>
              </el-row>
            </div>
            <div class="bsznMsg">
              <el-row>
                <el-col :span="1">
                  <span class="icon"></span>
                </el-col>
                <el-col :span="23">
                  等级保护备案申请流程以及等保资产申请条件与资格备案申请流程以及等保资产申请条件与资格
                </el-col>
              </el-row>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
    <div class="bock3">
      <el-row :gutter="20">
        <el-col :span="5">
          <div class="bock3Div">
            <div class="d1">政策法规</div>
            <div class="d2">最新的网络安全政策法规及解读</div>
            <div class="d3">
              <img src="../../assets/btm1.png" alt="" />
            </div>
          </div>
        </el-col>
        <el-col :span="5">
          <div class="bock3Div">
            <div class="d1">工作动态</div>
            <div class="d2">家网络安全及网安工作动态</div>
            <div class="d3">
              <img src="../../assets/btm2.png" alt="" />
            </div>
          </div>
        </el-col>
        <el-col :span="5">
          <div class="bock3Div">
            <div class="d1">办事指南</div>
            <div class="d2">工作办事指南及工作指引</div>
            <div class="d3">
              <img src="../../assets/btm3.png" alt="" />
            </div>
          </div>
        </el-col>
        <el-col :span="5">
          <div class="bock3Div">
            <div class="d1">信息通报</div>
            <div class="d2">网络安全事件通报及预警通报</div>
            <div class="d3">
              <img src="../../assets/btm4.png" alt="" />
            </div>
          </div>
        </el-col>
        <el-col :span="5">
          <div class="bock3Div">
            <div class="d1">安全宣传</div>
            <div class="d2">网络安全教育及意识宣传</div>
            <div class="d3">
              <img src="../../assets/btm5.png" alt="" />
            </div>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      radio1: "网络安全政策法规",
      radio2: "安全事件通报",
      radio3: "网安工作动态",
      radio4: "安全教育宣传",
      radio5: "办事指南",
    };
  },
};
</script>
<style scoped>
.home {
  width: 100%;
  margin-top: 1.2%;
}
.bock1 {
  background-color: #fff;
}
.carouselDiv {
  height: 375px;
  margin: 3.6%;
}
.newsDiv {
  margin: 3.6%;
  margin-left: 0px;
}
.newsDiv .title {
  position: relative;
  border-bottom: 1px dashed rgba(151, 151, 151, 1);
  height: 50px;
}

.newsDiv .title .title-left {
  position: absolute;
  left: 0;
  font-size: 24px;
  font-weight: 600;
  padding-top: 0.9%;
  padding-left: 1.9%;
}
.newsDiv .title .yaowen {
  position: absolute;
  left: 0;
}
.newsDiv .title .title-right {
  position: absolute;
  right: 0;
  padding-top: 2.4%;
}
.newsDiv .content {
  margin-top: 2.4%;
}
.newsDiv .content > div {
  padding: 14px 0;
  border-bottom: 1px dashed rgba(151, 151, 151, 1);
}
.newsDiv .content > div:first-child {
  padding-top: 0px;
}
/deep/.el-col-4 {
  height: 78px;
  width: 78px;
}
/deep/ .el-col-20 {
  padding-left: 20px;
}
.content-left {
  width: 100%;
  height: 100%;
  color: #fff;
  margin-left: 10px;
  border-radius: 50%;
  text-align: center;
  background-color: #0065ff;
}

.content-left-div {
  height: 36px;
  line-height: 10px;
  padding-top: 18px;
  font-size: 18px;
}
.content-right .top {
  font-size: 16px;
  color: #333333;
  line-height: 22px;
  font-weight: 600;
  margin-bottom: 0.8%;
}
.content-right .msg {
  font-family: PingFangSC-Regular;
  font-size: 16px;
  color: #666666;
  line-height: 24px;

  overflow: hidden;
  display: -webkit-box;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  /*要显示的行数*/
  /* autoprefixer: off */
  -webkit-box-orient: vertical;
  /* autoprefixer: on */

  font-weight: 400;
}
hr {
  width: 60%;
}
.gengduoImg {
  vertical-align: middle;
  margin-bottom: 4px;
}
.carouselDiv img {
  width: 100%;
  height: 100%;
}
/deep/ .el-carousel--horizontal {
  height: 100%;
}
/deep/ .el-carousel__container {
  height: 100%;
}
.carouselItem {
  position: relative;
}
.carouselItem .title {
  position: absolute;
  bottom: 0;
  height: 35px;
  width: 100%;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  line-height: 35px;

  padding-left: 3.9%;
}
/deep/ .el-carousel__indicators--horizontal {
  left: 90%;
}
/deep/ .el-carousel__button {
  width: 8px;
  height: 8px;
  border-radius: 4px;
  background: #fff;
  opacity: 1;
}
/deep/ .is-active .el-carousel__button {
  background: #0065ff;
}
.span12Div {
  position: relative;
  /* height: 376px; */
  background-image: linear-gradient(180deg, #e3eeff 0%, #ffffff 13%);
  border: 1px solid rgba(203, 215, 234, 1);
  box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.1);
  border-radius: 3px;
  margin-top: 20px;
  padding-bottom: 20px;
}
.span12Div .radio {
  width: 100%;
  text-align: center;
}
.span12Div .msg {
  margin: 0 32px;
  position: relative;
  font-size: 16px;
  height: 48px;
  line-height: 48px;
  color: #333333;
  border-bottom: 1px solid rgba(227, 227, 227, 1);
  white-space: nowrap; /* 禁止换行 */
  overflow: hidden; /* 隐藏溢出内容 */
  text-overflow: ellipsis; /* 超出用省略号表示 */
}
.span12Div .msg span {
  height: 48px;

  display: inline-block;
}
.span12Div .msg .span1 {
  width: 70%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.span12Div .msg .span2 {
  width: 30%;
  position: absolute;
  top: 2%;
  /* padding-top: 4px; */
  text-align: right;
  color: #666666;
}

/deep/ .el-radio-button__inner {
  padding: 8px 20px;
}
/deep/ .el-radio-button__orig-radio:checked + .el-radio-button__inner {
  background-color: #0065ff;
  border-color: #0065ff;
}
.span12Div .title {
  height: 70px;
}
.span12Div .yaowen {
  position: absolute;
  top: 20px;
  left: 20px;
}
.span12Div .title-left {
  position: absolute;
  top: 28px;
  left: 32px;
  font-size: 24px;
  font-weight: 600;
}
.span12Div .title-right {
cursor: pointer;
  position: absolute;
  right: 32px;
  top: 32px;
}

.span12Div .bszn {
  left: 48px;
}
.span12Div .bsznImg {
  left: 0px;
}
.span12Div .bsznRadio {
  margin: 20px 0;
}
.span12Div .bsznMsg {
  margin: 32px;
  position: relative;
  font-size: 16px;
  font-weight: 600;
  height: 48px;
  line-height: 24px;
  overflow: hidden;
  display: -webkit-box;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  /*要显示的行数*/
  /* autoprefixer: off */
  -webkit-box-orient: vertical;
  /* autoprefixer: on */
}
.span12Div .bsznMsg .icon {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 4px;
  margin-right: 4px;
  background-color: #0065ff;
}
/deep/ .el-col-5 {
  width: 20%;
}
.bock3 {
  margin-top: 20px;
  margin-bottom: 20px;
}
.bock3Div {
  position: relative;
  width: 100%;
  height: 112px;
  background: #ffffff;
  border: 1px solid rgba(203, 215, 234, 1);
  box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.1);
  border-radius: 3px;
}
.bock3Div .d1 {
  position: absolute;
  top: 16px;
  left: 16px;
  font-size: 20px;
  color: #0065ff;
  font-weight: 600;
}
.bock3Div .d2 {
  position: absolute;
  bottom: 16px;
  left: 16px;
  font-size: 16px;
  color: #666666;
  width: 50%;
  line-height: 24px;
  font-weight: 400;
}
.bock3Div .d3 {
  position: absolute;
  right: 14px;
  top: 16px;
}
.bock3Div .d3 img {
  width: 80px;
}
</style>